<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ isConfirm ? '变更订单确认' : '变更订单详情' }}</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div v-for="(link,index) in data" :key="index" class="input-box g-mb-10" id="link" style="margin-top: 30px;">
          <div class="box">
            <div class="img_box">
              <div>
                <img :src="data[index].productPhoto" class="avatar" alt="tzs" v-if="data[index].productPhoto">
                <p v-else>——</p>
              </div>
            </div>
            <div class="right">
              <div class="input_box">
                <div class="name">
                  <span>商品名：</span>
                  <span>{{ data[index].productName ? data[index].productName : '--' }} </span>
                </div>
              </div>
              <div class="sonData">
                <div>
                  <el-input placeholder="数量" type="number" size="mini" disabled min="0" v-model="data[index].sourceNumber">
                    <template slot="prepend">原商品数量</template>
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="数量" type="number" size="mini" disabled min="0" v-model="data[index].numbers">
                    <template slot="prepend">数量</template>
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="数量" type="number" size="mini" disabled min="0" v-model="data[index].sourceReturnNumber">
                    <template slot="prepend">原空桶数量</template>
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="空桶数" type="number" min="0" size="mini" disabled v-model="data[index].returnNumber">
                    <template slot="prepend">空桶数</template>
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="数量" type="number" size="mini" disabled min="0" v-model="data[index].sourceUsedAuthNumber">
                    <template slot="prepend">原已使用额度</template>
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="已使用额度" type="number" min="0" size="mini" disabled v-model="data[index].usedAuthNumber">
                    <template slot="prepend">已使用额度</template>
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="数量" type="number" size="mini" disabled min="0" v-model="data[index].sourceAuthNumber">
                    <template slot="prepend">原授权额度</template>
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="授权额度" type="number" size="mini" disabled  min="0" v-model="data[index].authNumber">
                    <template slot="prepend">授权额度</template>
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="数量" type="number" size="mini" disabled min="0"  v-model="data[index].sourcePledgeNumber">
                    <template slot="prepend">原抵押数量</template>
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="抵押数量" type="number" min="0" size="mini" disabled v-model="data[index].pledgeNumber">
                    <template slot="prepend">抵押数量</template>
                  </el-input>
                </div>
                <div>
                  <el-input type="number" size="mini" disabled  min="0" v-model="data[index].sourcePledgeMoney">
                    <template slot="prepend">原抵押金额</template>
                  </el-input>
                </div>
                <div>
                  <el-input placeholder="抵押金额" type="number" min="0" size="mini" disabled  v-model="data[index].pledgeMoney">
                    <template slot="prepend">抵押金额</template>
                  </el-input>
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>
      <div v-if="isConfirm" class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>

    </div>
  </div>
</template>

<script>
import {getDetail, confirmOrder} from "@/api/data/user/change";

export default {
  props: ['id', 'isConfirm'],
  data() {
    return {
      loading: false,
      data: {}
    }
  },
  mounted() {
    if (this.id) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      let that = this;
      this.loading = true;
      getDetail(that.id).then(res => {
        if (res) {
          that.data = res;
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },
    confirmEdit() {
      let that = this;
      that.$confirm('确定订单信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return confirmOrder({changeOrderNo: that.id});
      }).then(() => {
        that.closePopup(1)
      }).catch(() => {
      });
    },

    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', refresh)
    },
  }
}
</script>
<style>
.sonData .el-input-group__prepend {
  width: 70px !important;
}
</style>

<style scoped>
.box_body {
  height: 100% !important;
}

.name {
  height: 30px;
}

.box {
  display: flex;
  align-items: start;
}

.sonData {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.sonData > div {
  width: 40%;
  margin-top: 5px;
}

.sonData > div:nth-of-type(2n) {
  margin-left: 20px;
}

.avatar {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 10px;
}

.img_box {
  display: flex;
  align-items: center;
}
</style>

